import { useEffect, useRef, useCallback } from "react";
import * as echarts from "echarts";
import type { PieSeriesItem, RadiueBarProps } from "@/types/echarts";

// type PieChartSeries = PieSeriesItem[];
export default function RadiueBar({ data }: { data: RadiueBarProps[] }) {
  const chartRef = useRef<echarts.ECharts | null>(null);
  const target = useRef<HTMLDivElement>(null);

  const getSeriesData = useCallback(() => {
    const series: PieSeriesItem[] = [];
    data.forEach((item, index) => {
      series.push({
        name: item.name,
        type: "pie",
        clockwise: false,
        animation: false,
        radius: [73 - index * 15 + "%", 68 - index * 15 + "%"],
        center: ["55%", "55%"],
        label: { show: false },
        data: [
          { value: item.value, name: item.name },
          {
            value: 100,
            name: "",
            itemStyle: { color: "rgba(0,0,0,0)", borderWidth: 0 },
            tooltip: { show: false },
            animation: false,
          },
        ],
      });
      series.push({
        name: item.name,
        type: "pie",
        silent: true,
        z: 1,
        clockwise: false,
        animation: false,
        radius: [73 - index * 15 + "%", 68 - index * 15 + "%"],
        center: ["55%", "55%"],
        label: { show: false },
        data: [
          {
            name: "",
            value: 7.5,
            itemStyle: { color: "rgb(3, 31, 62)", borderWidth: 0 },
            tooltip: { show: false },
            animation: false,
          },
          {
            value: 2.5,
            name: "",
            itemStyle: { color: "rgba(0,0,0,0)", borderWidth: 0 },
            tooltip: { show: false },
            animation: false,
          },
        ],
      });
    });
    return series;
  }, [data]);

  const initEcharts = useCallback(() => {
    if (!target.current) return;
    if (!chartRef.current) {
      chartRef.current = echarts.init(target.current);
    }
    const options = {
      legend: {
        show: true,
        icon: "circle",
        top: "14%",
        left: "60%",
        data: data.map((item) => item.name),
        width: -5,
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 6,
        formatter: function (name: string) {
          return "{title|" + name + "}";
        },
        textStyle: {
          rich: {
            title: {
              fontSize: 12,
              lineHeight: 5,
              color: "rgba(255,255,255,0.8)",
            },
          },
        },
      },
      tooltip: {
        show: true,
        trigger: "item",
        formatter: "{a}<br>{b}:{c}({d}%)",
      },
      yAxis: [
        {
          type: "category",
          inverse: true,
          axisLine: { show: false },
          axisTick: { show: false },
        },
      ],
      xAxis: [{ show: false }],
      series: getSeriesData(),
    };
    chartRef.current.setOption(options);
  }, [data, getSeriesData]);

  useEffect(() => {
    initEcharts();

    const handleResize = () => {
      if (chartRef.current) {
        chartRef.current.resize();
      }
    };

    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
      if (chartRef.current) {
        chartRef.current.dispose();
        chartRef.current = null;
      }
    };
  }, [initEcharts]);

  return (
    <div className="h-1/3 box-border pb-4">
      <div className="text-2xl text-white">【大区异常处理】</div>
      <div ref={target} className="w-full h-full"></div>
    </div>
  );
}
